<template>
    <div class="sortList">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>配置项管理</el-breadcrumb-item>
                <el-breadcrumb-item>配置项列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="searchBox">
            <div class="search">
                <el-input type="text" v-model="keyword" placeholder="请输入排序信息" clearable></el-input>
                <el-button type="primary" size="small">搜索</el-button>
            </div>
        </div>
        <div class="table-content">
            <el-table
                border
                empty-text="当前数据空空如也"
                ref="multipleTable"
                :data="sortList"
                tooltip-effect="dark"
                style="width: 100%"
                @select="selectedRow"
                @select-all="selectedAll"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="配置ID" width="100"></el-table-column>
                <el-table-column prop="title" label="配置标题" width="auto"></el-table-column>
                <el-table-column prop="name" label="配置名称" width="auto"></el-table-column>
                <el-table-column prop="value" label="配置值" width="auto">
                    <template slot-scope="scope">
                        <div v-if="item.status==1" v-for="(item,index) in scope.row.value" :key="index">{{item.title}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="auto">
                    <template slot-scope="scope">
                        <div>{{$moment(scope.row.create_time*1000).format('yyyy-MM-DD HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" width="auto">
                    <template slot-scope="scope">
                        <div>{{scope.row.update_time?$moment(scope.row.update_time*1000).format('yyyy-MM-DD HH:mm'):''}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button slot="reference" @click="toEdit(scope.$index, scope.row)" type="primary" size="mini">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-nav">
                <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog
        title="编辑排序配置项"
        :visible.sync="dialogVisible"
        width="30%">
        <div class="sortDialog">
            <div class="item">
                <span class="title">配置标题：</span>
                <el-input v-model="sortItem.title" type="text" placeholder="请输入配置标题"></el-input>
            </div>
            <div class="item">
                <span class="title">配置值：</span>
                <el-radio-group v-model="sortRadio" @change="selectValue">
                    <el-radio :label="index" v-for="(item,index) in sortItem.value" :key="index">{{item.title}}</el-radio>
                </el-radio-group>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitSort">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            sortList:[],
            keyword:'',
            page:1,
            pagesize:10,
            multipleSelection:[],
            total:0,
            dialogVisible:false,
            sortItem:{},
            sortRadio:1,
        }
    },
    mounted() {
        this.getSortList()
    },
    methods: {
        // 获取排序配置列表
        getSortList(){
            let params = {
                keyword:this.keyword,
                page:this.page,
                pagesize:this.pagesize
            }
            this.$http.post('/api/root/SortConfig/index',params).then(res=>{
                console.log(res,'排序配置列表');
                if(res.code==1){
                    this.sortList = res.data.list?res.data.list:[]
                    this.total = res.data.total
                }
            })
        },

        // 编辑按钮
        toEdit(index,row){
            console.log(index,row,'配置项');
            this.dialogVisible = true
            this.sortItem = JSON.parse(JSON.stringify(row))
            this.sortRadio = this.sortItem.value.findIndex(item=>item.status==1)
            // console.log(this.sortRadio,'---');
        },

        // 选择配置值
        selectValue(){
            this.sortItem.value.map(item=>item.status = 0)
            this.sortItem.value[this.sortRadio].status = 1
            // console.log(this.sortItem);
        },

        // 弹出框确定
        submitSort(){
            if(this.sortItem.title==''){
                this.$message.warning('配置标题不能为空')
                return
            }
            let params = {
                id:this.sortItem.id,
                title:this.sortItem.title,
                value:JSON.stringify(this.sortItem.value)
            }
            console.log(params,'编辑数据');
            this.$http.post('/api/root/SortConfig/edit',params).then(res=>{
                console.log(res);
                if(res.code==1){
                    this.$message.success('编辑成功')
                    this.dialogVisible = false
                    this.sortItem = {}
                    this.getSortList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },
        
        // 分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getSortList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getSortList()
        },

        // 选择
        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },

    },
}
</script>
<style lang="less">
    @import 'list.less';
</style>